<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#canvas{
				position: absolute;
				top:0;
				left:0;
				z-index:999 ;
				border: 1px solid red;
			}
			#canvas1{
				position: absolute;
				top: 0;
				left: 0;
				z-index: 100;
			}
			#canvas2{
				position: absolute;
				top:0;
				left: 0;
				z-index: 110;
			}
			#canvas3{
				position: absolute;
				top:0;
				left: 0;
				z-index: 90;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="600" height="400"></canvas>
		<canvas id="canvas1" width="600" height="400"></canvas>
		<canvas id="canvas2" width="600" height="400"></canvas>
		<canvas id="canvas3" width="600" height="400"></canvas>
		<script>
			function getCanvas(id){
				return document.getElementById(id);
			}
			
			var canvas = getCanvas('canvas');
			var canvas1 = getCanvas('canvas1');
			var canvas2 = getCanvas('canvas2');
			var canvas3 = getCanvas('canvas3');
			var ctx = canvas.getContext('2d');
			var ctx1 = canvas1.getContext('2d');
			var ctx2 = canvas2.getContext('2d');
			var ctx3 = canvas3.getContext('2d');

			ctx.fillStyle = 'black';
			ctx.fillRect(0,195,600,10);
			ctx.fillRect(295,0,10,400);
			var Node = new Array();
			var nodeW = 10;
			var nodeH = 25;
			
			ctx1.fillStyle = 'blue';
			ctx2.fillStyle = 'blue';
			
			var arr = new Array();
			ctx1.fillRect(560,170,15,30);
			var personTmp = {
				x:560,
				y:170,
				type:0,
				status:0,
				dir:0
			}
			arr.push(personTmp);
			ctx1.fillRect(40,206,15,26);
			var personTmp = {
				x:40,
				y:206,
				type:1,
				status:0,
				dir:0
			}
			arr.push(personTmp);
			ctx2.fillRect(306,365,26,15);
			var personTmp = {
				x:306,
				y:365,
				type:2,
				status:0,
				dir:0
			}
			arr.push(personTmp);
			ctx2.fillRect(270,30,26,15);
			var personTmp = {
				x:270,
				y:30,
				type:3,
				status:0,
				dir:0
			}
			arr.push(personTmp);
			
			
			
			function a(){
				var tmp = getNum();
				Node.push(tmp);
				console.log(Node);
			}
			
			function draw(obj,x,y,w,h){
				obj.fillStyle = 'black';
				obj.fillRect(x,y,w,h)
			}
			
			function clear(obj,x,y,w,h){
				obj.fillStyle = 'white';
				obj.clearRect(x,y,w,h)
			}
			
			function run(){
				var nodeLength = Node.length;
				var num = null;
				for(var i = 0;i<nodeLength;i++){
					if((Node[i].x>canvas.width) || (Node[i].x<-nodeW) || (Node[i].y>canvas.height) ||(Node[i].y<-nodeW)){
						var num=i;
						continue;
					}
					
					
					
					
					switch(Node[i].type){
						case 0:
							clear(ctx1,Node[i].x-2,Node[i].y,nodeW,nodeH);
							draw(ctx1,Node[i].x,Node[i].y,nodeW,nodeH);
							Node[i].x=Node[i].x+2;
							for(var j=0;j<arr.length;j++){
								if(arr[j].type == 0){
									if((Node[i].x+10>=arr[j].x && Node[i].x+10<=arr[j].x+15)&&(Node[i].y>=arr[j].y && Node[i].y<=arr[j].y+30)){
										if(confirm('游戏结束')){
											location.reload();	
										}
										
									}
								}
								
							}
							break;
						case 1:
							clear(ctx1,Node[i].x+2,Node[i].y,nodeW,nodeH);
							draw(ctx1,Node[i].x,Node[i].y,nodeW,nodeH);
							Node[i].x=Node[i].x-2;
							break;
						case 2:
							clear(ctx2,Node[i].x,Node[i].y+2,nodeH,nodeW);
							draw(ctx2,Node[i].x,Node[i].y,nodeH,nodeW);
							Node[i].y=Node[i].y-2;
							break;
						case 3:
							clear(ctx2,Node[i].x,Node[i].y-2,nodeH,nodeW);
							draw(ctx2,Node[i].x,Node[i].y,nodeH,nodeW);
							Node[i].y=Node[i].y+2;
							break;
					}
				}
				if(num !== null){
					Node.splice(num,1);
				}
				
			}
			
			setInterval(run,1000/60);
			function getNum(){
				var n = parseInt(Math.random()*100)%4;
				switch(n){
					case 0:
						var tmp = {
							x:0,
							y:175,
							type:0
						}
						break;
					case 1:
						var tmp = {
							x:590,
							y:200,
							type:1
						}
						break;
					case 2:
						var tmp = {
							x:275,
							y:390,
							type:2
						}
						break;
					case 3:
						var tmp = {
							x:300,
							y:0,
							type:3
						}
						break;
				}
				return tmp;
			}
			a();
			setInterval(a,2500);
		
			
//			ctx3.fillStyle = 'blue';
//			ctx3.fillRect(560,170,15,26);
		
			
			function getType(a){
				if((a[0]>=canvas.width/2)&&(a[1]<=canvas.height/2)){
					return 0;
				}
				if((a[0]<=canvas.width/2)&&(a[1]>=canvas.height/2)){
					return 1;
				}
				if((a[0]<=canvas.width/2)&&(a[1]<=canvas.height/2)){
					return 2;
				}
				if((a[0]>=canvas.width/2)&&(a[1]>=canvas.height/2)){
					return 3;
				}
			}
		
			function test0(){
				ctx1.fillStyle = 'blue';
				if(arr[0].y==80){
					arr[0].dir = 1;
				}
				
				
				if(arr[0].dir){
					ctx1.clearRect(arr[0].x,arr[0].y-3,15,30);
					ctx1.fillRect(arr[0].x,arr[0].y,15,30);
					arr[0].y=arr[0].y+3;
				}else{
					ctx1.clearRect(arr[0].x,arr[0].y+3,15,30);
					ctx1.fillRect(arr[0].x,arr[0].y,15,30);
					arr[0].y=arr[0].y-3;
				}
				if((arr[0].y == 170) && (arr[0].status == 2)){
					clearInterval(typeInterval1);
					arr[0].dir = 0;
					arr[0].status = 0;
					return ;
				}
				arr[0].status = 2;
			}
			
			canvas.addEventListener('click',function(e){
				var tmp = [e.clientX,e.clientY];
				var n = getType(tmp);
//				alert(n);
				switch(n){
					case 0:
						if(!arr[0].status){
							arr[0].status = 1;
							typeInterval1 = setInterval(test0,1000/60);
						}
						
						
						break;
					case 1:
						
						break;
					case 2:
						
						break;
					case 3:
						
						break;
				}
			})
		</script>
	</body>
</html>
